<template>
    <div>
        <div class='notice'>
             <div class="box" v-for="(item,index) in message" :key="index">
            <div class="box-top wangdian" >
                <div class="box-top-title">
                    <div class="box-top-title-red"></div>
                    <div class="box-top-title-img">
                        <img src="@/assets/images/myInfo/insurance.png">
                    </div>
                    <div class="box-top-title-text">投保成功通知</div>
                </div>
                <div class="box-top-time">{{item.crt_date}}</div>
            </div>
            <div class="center">
                <div class="center-item" v-for="item in itemList" :key = item.name>
                    <div class="class-item-left">{{item.codeDesc}}</div>
                    <div class="class-item-right">{{item.codeName}}</div>
                </div>
                <div class="center-bottom">
                    <van-cell title="查看详情" is-link to="index" />
                </div>
            </div>
        </div>

    </div>
       
        <!-- <div class="box">
            <div class="box-topBlue box-top">
                <div class="box-top-title">
                    <div class="box-top-title-red" v-if="state == 0 ? 1 : 0"></div>
                    <div class="box-top-title-img">
                        <img src="@/assets/images/myInfo/subscribe.png">
                    </div>
                    <div class="box-top-title-text">网点预约临柜通知</div>
                </div>
                <div class="box-top-time">2020-2-12 12:56:24</div>
            </div>
            <div class="center">
                <div class="center-ifitem">您预约的时间快到了，请及时前往处理</div>
                <div class="center-item" v-for="item in itemList" :key = item.name>
                    <div class="class-item-left">{{item.name}}</div>
                    <div class="class-item-right">{{item.namer}}</div>
                </div>
            </div>
        </div> -->
        
    </div>
</template>
<script>
import Vue from 'vue';
import 'vant/lib/cell/style';
import { cloudApi } from '@/api/indexApi';
import { Cell, CellGroup } from 'vant';
import { log } from '@/utils';

Vue.use(Cell);
Vue.use(CellGroup);
export default {
    data(){
        return{
            state : '1',
            type : '',
            time : '',
            itemList : [],
            message : [],
        } 
    },
    created(){
        cloudApi.notificationTypeUrl({type :1}).then(res => {
            this.itemList = res.data.result
        })
        cloudApi.notificationURL({openId:'123'}).then(res => {
            let messageCenter = res.data.result.messageCenter
            this.message = messageCenter
            let message1 = messageCenter.map((item,index) => {
                return JSON.parse(item.message)
            })
            
            console.log(message1);
            this.itemList.map((item,index) => {
                message1.map((value,index) => {
                    if (value.hasOwnProperty(item.codeName)) {
                        item.codeName = value[item.codeName]
                    }
                })
            })
            console.log(this.message);
            this.message.forEach((item,index) => {
               item.crt_date = item.crt_date.substring(0,item.crt_date.length - 2)
            })
        })
        
    }
}
</script>
<style lang="less" scoped>  
    .notice{
        font-family: PingFang SC;
        margin:14px 10px;
    }
    .toubao{
        color: #378F69;
    }
    .wangdian{
        color: #617CB2;
    }
    .box{
        display: flex;
        align-items: left;
        flex-flow: column;
        width:100%;
        margin-bottom:10px;
        .box-topBlue{
            background: #F2FAFF !important;
        }
        .box-top{
            background: #F3FFF3;
            padding: 0 10px 0 5px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 6px 6px 0px 0px;
            .box-top-title{
                line-height: 50px;
                display: flex;
                align-items: center;
                .box-top-title-red{
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    background: red;
                }
                .box-top-title-img{
                    display: flex;
                    margin:0 6.5px;
                    img{
                        width: 17.5px;
                        height:20.5px;
                    }
                }
                .box-top-title-text{
                    font-size: 15px;
                    // color: #378F69;
                }
            }
            .box-top-time{
                font-size:13px;
                color: #636363;
            }
        }
        .center{
            background: #fff;
            padding:20px 20px 0;
            .center-ifitem{
                height: 31px;
                display: flex;
                align-items: flex-start;
                justify-items: left;
                font-size: .125rem;
                color: #617CB2;
            }
            .center-item{
                display: flex;
                font-size:14px;
                padding-bottom: 15px;
                .class-item-left{ 
                    flex:1;
                    color: #999999;
                }
                .class-item-right{
                    flex:3;
                    color: #333333;
                }
            }
            .center-bottom{
                display: flex;
                justify-content: space-between;
                border-top: 1px solid #EEEEEE;
                height: 43px;
                align-items: center;
                .van-cell{
                    padding: 0;
                    .van-cell__title{
                        font-size: 14px;
                        color: #666666;
                    }
                }
            }
        }
    }
</style>